<!-- 分享攒分-->
<template>
	<div class="sharescore-panel">
		<nav-bar :back="1" :title="title"></nav-bar>
		<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
			<div class="sharescore">
				<div v-show="isUpImg" class="pic-preview">
					<van-image width="100%" height="100%" :src="upImg"></van-image>
				</div>
				<form enctype="multipart/form-data" @submit="upLoadImage">
					<div :class="'addPicture ' + (isUpImg?'addPicture-have-img':'')">
						<div v-show="isUpImg" class="addPicture-hint">重新添加后，新图片会顶替原上传图片</div>
						<div class="addPicture-image">
							<van-uploader :after-read="addPicture">
								<van-image width="100%" height="0.8rem"
									:src="require('../../assets/imgs/share-score'+ (isUpImg ? '2' : '') +'.png')">
								</van-image>
							</van-uploader>
						</div>
						<div class="addPicture-hint">上传分享截图凭证，待审核后将会发放相应的积分哦</div>
					</div>
					<div class="submit-pic">
						<button class="btn main-btn submit-pic-btn">确认提交</button>
					</div>
				</form>
			</div>
		</van-pull-refresh>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	import NavBar from '../../components/NavBar.vue';

	import {
		upLoadPic,
		share_score_api
	}
	from '../../api/index.js';

	export default {
		name: 'share-score',
		components: {
			NavBar
		},
		data() {
			return {
				isLoading: false,
				title: '分享攒分',
				isUpImg: false,
				file: '',
				upImg: ''
			}
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
				}, 1000);
			},
			addPicture(res) {
				console.log('addPicture', res)
				if (res != null) {
					this.isUpImg = true;
					this.upImg = res.content;
					this.file = res.file;
				}
			},
			upLoadImage(e) {
				e.preventDefault()
				if (this.isUpImg) {
					let formData = new FormData()
					formData.append('file', this.file)
					upLoadPic(formData, (res) => {
						console.log(res)
						let data = {
							PicUrl: res.url
						}
						share_score_api.saveUserSharePicShot(data,(res2) => {
							Toast('上传成功');
							setTimeout(()=>{
								this.$router.back()
							},1000)
						})
					})
				} else {
					Toast('请添加图片');
				}
			}
		}
	}
</script>

<style scoped>
	.sharescore-panel {
		width: 100%;
		height: 100%;
		padding-top: 0.88rem;
		background-color: #F6F5FB;
	}

	.default-page {
		width: 100%;
		min-height: calc(100vh - 0.88rem);
		background: #FFFFFF;
	}

	.sharescore {
		min-height: calc(100vh - 0.88rem);
		background: #FFFFFF;
	}

	.addPicture {
		padding-top: 1.34rem;
	}

	.addPicture-have-img {
		padding-top: 0.3rem;
	}

	.addPicture-image {
		width: 6.4rem;
		height: 0.8rem;
		margin: 0 auto;
	}

	.addPicture-hint {
		height: 0.94rem;
		text-align: center;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.94rem;
	}

	.addPicture-have-img>.addPicture-hint {
		height: 0.58rem;
		line-height: 0.58rem;
	}

	.pic-preview {
		width: 4rem;
		height: 5.28rem;
		padding-top: 0.42rem;
		margin: 0 auto;
	}

	.submit-pic {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.submit-pic-btn {
		margin-bottom: 0.4rem;
	}
</style>
